@charset 'UTF-8';

/**
 * 
 * @authors lqxion (you@example.org)
 * @date    2016-02-22 09:48:56
 * @version 1.0.0
 */

body,
div,
ul,
li,
p,
a {
    margin: 0;
    padding: 0;
}

.box {
    position: relative;
    overflow: hidden;
    box-sizing: border-box;
    width: 360px;
    height: 240px;
    background: #fe7253;
}


/* 
	transition(过滤属性,过滤时间,过滤动画类型 ease-in ease-out ease-in-out)过渡效果
 */

.box img {
    position: relative;
    display: block;
    overflow: hidden;
    width: 100%;
    opacity: 1;
}


/* 
	图片动画缩放
	transform 2D变换scale(<number>[, <number>])： 指定对象的2D scale（2D缩放）。第一个参数对应X轴，第二个参数对应Y轴。如果第二个参数未提供，则默认取第一个参数的值 
 	scale(1.5)大于1值发大 小于1值缩小
 */

.box:hover img {
    position: absolute;
    cursor: pointer;
    -webkit-transform: scale(1.1);
    -moz-transform: scale(1.1);
    -ms-transform: scale(1.1);
    -o-transform: scale(1.1);
    transform: scale(1.1);
    opacity: .7;
}

.box-caption {
    overflow: hidden;
    color: #fff;
    -moz-backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}


/* 
	before after 表示元素的前后。需要与content连用 才能起效
	过滤
 */

.box .box-caption:before,
.box .box-caption:after {
    position: absolute;
    content: '';
    -webkit-transition: opacity .4s, -webkit-transform .4s;
    -moz-transition: opacity .4s, -moz-transform .4s;
    -o-transition: opacity .4s, -o-transform .4s;
    transition: opacity .4s, transform .4s;
    opacity: 1;
}


/* 链接置于顶部 链接到其它网页 */

.box-link {
    position: absolute;
    z-index: 1000;
    top: 0;
    left: 0;
    overflow: hidden;
    width: 100%;
    height: 100%;
}


/* 文字头部 过滤效果 */

.box-header {
    font-size: 1.3em;
    font-weight: 700;
    position: absolute;
    top: 20%;
    left: 10%;
    overflow: hidden;
    width: 80%;
    -webkit-transition: all .5s ease-in-out;
    -moz-transition: all .5s ease-in-out;
    -ms-transition: all .5s ease-in-out;
    -o-transition: all .5s ease-in-out;
    transition: all .5s ease-in-out;
    text-align: center;
    opacity: 1;
}

.box:hover .box-header {
    color: #09c;
}


/* 文字内容过滤效果 */

.box-body {
    font-size: 1em;
    position: absolute;
    top: 60%;
    left: 10%;
    overflow: hidden;
    width: 80%;
    -webkit-transition: top .4s ease-in-out;
    -moz-transition: top .4s ease-in-out;
    -ms-transition: top .4s ease-in-out;
    -o-transition: top .4s ease-in-out;
    transition: top .4s ease-in-out;
    text-align: center;
    opacity: 0;
}

.box:hover .box-body {
    top: 45%;
    opacity: 1;
}


/* 关闭式Border 动画 */


/**
 * [  transform-origin设置转换远点 默认为 50% 50% center]
 * @type {[type]}
 */

.box-closed-border .box-caption:before {
    top: 8%;
    right: 10%;
    bottom: 8%;
    left: 10%;
    -webkit-transform: scale(0, 1);
    -moz-transform: scale(0, 1);
    -o-transform: scale(0, 1);
    transform: scale(0, 1);
    -webkit-transform-origin: 0 0;
    -moz-transform-origin: 0 0;
    -ms-transform-origin: 0 0;
    -o-transform-origin: 0 0;
    transform-origin: 0 0;
    border-top: 1px solid #fff;
    border-bottom: 1px solid #fff;
}

.box-closed-border .box-caption:after {
    top: 8%;
    right: 10%;
    bottom: 8%;
    left: 10%;
    -webkit-transform: scale(1, 0);
    -moz-transform: scale(1, 0);
    -o-transform: scale(1, 0);
    transform: scale(1, 0);
    -webkit-transform-origin: 100% 0;
    -moz-transform-origin: 100% 0;
    -o-transform-origin: 100% 0;
    transform-origin: 100% 0;
    border-right: 1px solid #fff;
    border-left: 1px solid #fff;
}


/* 边框动画显示 */

.box-closed-border:hover .box-caption:before,
.box-closed-border:hover .box-caption:after {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
    opacity: 1;
}


/* 叉开式border动画  */

.box-forked-border .box-caption:before {
    top: 10%;
    right: 5%;
    bottom: 10%;
    left: 5%;
    -webkit-transform: scale(0, 1);
    -moz-transform: scale(0, 1);
    -o-transform: scale(0, 1);
    transform: scale(0, 1);
    -webkit-transform-origin: 0 0;
    -moz-transform-origin: 0 0;
    -ms-transform-origin: 0 0;
    -o-transform-origin: 0 0;
    transform-origin: center;
    border-top: 1px solid #fff;
    border-bottom: 1px solid #fff;
}

.box-forked-border .box-caption:after {
    top: 5%;
    right: 10%;
    bottom: 5%;
    left: 10%;
    -webkit-transform: scale(1, 0);
    -moz-transform: scale(1, 0);
    -o-transform: scale(1, 0);
    transform: scale(1, 0);
    -webkit-transform-origin: 100% 0;
    -moz-transform-origin: 100% 0;
    -ms-transform-origin: 100% 0;
    -o-transform-origin: 100% 0;
    transform-origin: left;
    border-right: 1px solid #fff;
    border-left: 1px solid #fff;
}

.box-forked-border:hover .box-caption:before,
.box-forked-border:hover .box-caption:after {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
    opacity: 1;
}


/* 3D翻转 Flip*/


/* 
	多少像素的3D元素是从视图的perspective属性定义。这个属性允许你改变3D元素是怎样查看透视图。
	perspective-origin 属性定义 3D 元素所基于的 X 轴和 Y 轴。该属性允许您改变 3D 元素的底部位置。
 */

.box-flip {
    position: relative;
    display: block;
    overflow: hidden;
    box-sizing: border-box;
    width: 360px;
    height: 240px;
    border: none;
    -webkit-perspective: 1000px;
    -moz-perspective: 1000px;
    perspective: 1000px;
    -webkit-perspective-origin: center;
    -moz-perspective-origin: center;
    perspective-origin: center;
}


/*
	transform-style属性的使用语法非常简单：
	transform-style: flat | preserve-3d
	其中flat值为默认值，表示所有子元素在2D平面呈现。preserve-3d表示所有子元素在3D空间中呈现。
 */

.box-flip-inner {
    position: relative;
    width: 100%;
    height: 100%;
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    transform-style: preserve-3d;
}

.box-flip-inner div.box-flip-front {
    -webkit-transition: all .5s ease-in-out;
    -moz-transition: all .5s ease-in-out;
    -ms-transition: all .5s ease-in-out;
    transition: all .5s ease-in-out;
    backface-visibility: hidden;
}

.box-flip-inner > div img {
    position: relative;
    display: block;
    max-width: 100%;
    margin: 0;
    padding: 0;
}

.box-flip-back {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    text-align: center;
    opacity: 0;
    color: #fff;
    background-color: #fe7253;
    backface-visibility: hidden;
}

.box-flip-back h3 {
    font-size: 1.3em;
    font-weight: 700;
    position: absolute;
    top: 25%;
    left: 5px;
    width: 100%;
    text-align: center;
    color: #fff;
}

.box-flip-back p {
    font-size: 1em;
    position: absolute;
    top: 45%;
    left: 5px;
    width: 100%;
    margin: 0;
    padding: 0;
    text-align: center;
    color: #fff;
}

.box-flip a {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}


/**
 * X轴翻转 FlipX
 * translateX(<length>)： 指定对象X轴（水平方向）的平移 
 * translateY(<length>)： 指定对象Y轴（垂直方向）的平移 
 * @type {[type]}
 */

.box-flipX:hover > div.box-flip-front {
    -webkit-transform: rotateX(180deg);
    -moz-transform: rotateX(180deg);
    transform: rotateX(180deg);
}


/* 设置box-flip-back先翻转为反面 然后hover时翻转成正面 呈现出一种动画效果 */

.box-flipX .box-flip-back {
    -webkit-transition: all .5s ease-in-out;
    -moz-transition: all .5s ease-in-out;
    transition: all .5s ease-in-out;
    -webkit-transform: rotateX(-180deg);
    -moz-transform: rotateX(-180deg);
    transform: rotateX(-180deg);
}

.box-flipX:hover .box-flip-back {
    -webkit-transform: rotateX(0);
    -moz-transform: rotateX(0);
    transform: rotateX(0);
    opacity: 1;
}


/* Y轴翻转 FlipY */

.box-flipY .box-flip-back {
    -webkit-transition: all .5s ease-in-out;
    -moz-transition: all .5s ease-in-out;
    transition: all .5s ease-in-out;
    -webkit-transform: rotateY(-180deg);
    -moz-transform: rotateY(-180deg);
    transform: rotateY(-180deg);
}

.box-flipY:hover > div.box-flip-front {
    -webkit-transform: rotateY(180deg);
    -moz-transform: rotateY(180deg);
    transform: rotateY(180deg);
}

.box-flipY:hover .box-flip-back {
    -webkit-transform: rotateY(0);
    -moz-transform: rotateY(0);
    transform: rotateY(0);
    opacity: 1;
}


/* 下滑动画 slide */

.box-slide {
    background: #fe7253;
    width: 360px;
    height: 240px;
    position: relative;
    box-sizing: border-box;
    cursor: pointer;
    -webkit-transition: all .4s ease-in-out;
    -moz-transition: all .4s ease-in-out;
    -o-transition: all .4s ease-in-out;
    -ms-transition: all .4s ease-in-out;
    transition: all .4s ease-in-out;
    overflow: hidden;
}

.box-slide img {
    position: relative;
    display: block;
    width: 100%;
    opacity: 1;
}

.box-slide .box-slide-caption {
    color: #fff;
    background: rgba(254, 114, 83, 0);
    -moz-backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transform: translate3d(0, -100%, 0);
    -moz-transform: translate3d(0, -100%, 0);
    -o-transform: translate3d(0, -100%, 0);
    -ms-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
    -webkit-transition: all .4s ease-in-out;
    -moz-transition: all .4s ease-in-out;
    -o-transition: all .4s ease-in-out;
    -ms-transition: all .4s ease-in-out;
    transition: all .4s ease-in-out;
    overflow: hidden;
}

.box-slide:hover .box-slide-caption {
    background: rgba(254, 114, 83, .8);
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -o-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}

.box-slide .box-slide-caption,
.box-slide .box-slide-caption > a {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    -webkit-transition: all .4s ease-in-out;
    -moz-transition: all .4s ease-in-out;
    -o-transition: all .4s ease-in-out;
    -ms-transition: all .4s ease-in-out;
    transition: all .4s ease-in-out;
    overflow: hidden;
}

.box-slide .box-header {
    font-size: 1.3em;
    font-weight: 700;
    text-align: center;
    width: 80%;
    position: absolute;
    top: -50%;
    left: 10%;
    -webkit-transition: all .5s ease-in-out;
    -moz-transition: all .5s ease-in-out;
    -o-transition: all .5s ease-in-out;
    -ms-transition: all .5s ease-in-out;
    transition: all .5s ease-in-out;
    overflow: hidden;
    opacity: 0;
}

.box-slide:hover .box-header {
    color: #fff;
    top: 25%;
    opacity: 1;
}

.box-slide .box-body {
    font-size: 1em;
    text-align: center;
    width: 80%;
    position: absolute;
    top: -50%;
    left: 10%;
    -webkit-transition: all .6s ease-in-out;
    -moz-transition: all .6s ease-in-out;
    -o-transition: all .6s ease-in-out;
    -ms-transition: all .6s ease-in-out;
    transition: all .6s ease-in-out;
    overflow: hidden;
    opacity: 0;
}

.box-slide:hover .box-body {
    color: #fff;
    top: 45%;
    opacity: 1;
}


/* 全部下滑 */

.box-slideAll img {
    position: relative;
    display: block;
    width: 100%;
    opacity: .9;
    -webkit-transition: all .4s ease-in-out;
    -moz-transition: all .4s ease-in-out;
    -o-transition: all .4s ease-in-out;
    -ms-transition: all .4s ease-in-out;
    transition: all .4s ease-in-out;
    overflow: hidden;
}

.box-slideAll:hover img {
    opacity: 1;
    -webkit-transform: translate3d(0, 100%, 0);
    -moz-transform: translate3d(0, 100%, 0);
    -o-transform: translate3d(0, 100%, 0);
    -ms-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0)
}
